var myinteract_iframe_id="";
//获取外部iframeid设置iframe高度
if(typeof(window.parent.ywdList)!="undefined"){
	myinteract_iframe_id=window.parent.ywdList.getFrameId(this);
	$("#"+myinteract_iframe_id,parent.document).height($("body").height()+50);
}
console.info(myinteract_iframe_id);
    (function () {
        //添加组件
        var data = [
            '001',
            '002',
            '003',
            '004',
            '005',
            '006',
            '007',
            '008'
        ];
        //ywd
        var ywd_maxRightHeight=100;
        var ywd_maxRightWidth=100;
        
        var dh = 100;
        /*data.map(function (t, i) {
            var rate = 70-8*i;
            $('.left').load("leftnav.html");
            $('.left').append('<div class="drag_l" id="'+i+'" style="position: fixed;bottom: '+rate+'%;z-index: 1000;">' + t + '</div>')
        });*/
        $('.left').load("leftnav.html");
        $(function () {
            //console.info("22222");
            //左边列表事件
            
            leftnavBindEvent();
            mydrag();

        });
        
        function leftnavBindEvent(){
            $('.drag_l').click(function () {
                //控制组件出现位置 提高用户体验
                var rignthContentTop=$(this).offset().top-100+"px";
                var ringthContentleft=$(this).offset().left+"px";
                $('.right').append('<div class="draggable" id="' + $(this).attr('id') + 
                //'"  style=" background:' + getRandomColor() + '">\n' +
                '"  style=" background:gray;top:'+rignthContentTop+'">\n' +
                    //'            <h4>' + $(this).text() + '</h4>\n' +
                    '            <p class="lt" style="z-index:1000"></p>\n' +
                    '            <p class="wh" style="z-index:1000"></p>\n' +
                    '            <p class="close" style="z-index:1000" >关闭</p>\n' +
                    '            <div id="ssg'+$(this).attr('id')+'" style="width: 100%px;height: 100%;overflow:auto;"></div>'+
                    '        </div>')
                $("#ssg"+$(this).attr('id')).load("ssg.html");
                //初始banding事件 避免初始化无法关闭问题
                $(".close").click(function () {
                    $('.left').find('#' + $(this).parent().attr('id')).css('display', 'block');
                    $(this).parent().remove();
                    //防止其他js破坏
                    $("#content").nextAll().remove();
                })
                //$(this).css("display", "none");
                //$(this).attr("id")
            });
        }
        var every_x = [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
        var every_y = [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];

        var status1=true,status2=true,status3=true,status4=true;

        function removeByValue(arr, val) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == val) {
                    arr.splice(i, 1);
                    break;
                }
            }
        }

        Array.prototype.insert = function (index, item) {
            this.splice(index, 1, item);
        };
        //随机颜色 暂时不需要
        var getRandomColor = function () {

            return '#' +
                (function (color) {
                    return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
                    && (color.length == 6) ? color : arguments.callee(color);
                })('');
        }

        //将组件初始化为interact class不可改动 默认draggable 可以大小拖动
        var mydrag = function () {
            // target elements with the "draggable" class

            interact('.draggable')
                .draggable({

                    // enable inertial throwing
                    inertia: true,

                    // keep the element within the area of it's parent
                    restrict: {
                        restriction: "parent",
                        endOnly: true,
                        elementRect: {top: 0, left: 0, bottom: 1, right: 1}
                    },


                    maxPerElement: 100,
                    onmove: dragMoveListener,
                    onstart: startListener,


                    onend: function (event) {
                        var textEl = event.target.querySelector('p.lt');

                        textEl && (textEl.textContent =
                            position(event));

                        var closeEl = event.target.querySelector('p.close');
                        closeEl.style.display = 'block';

                        drag_s(event);

                        myclose(event);

                    }


                })

                .resizable({
                    // resize from all edges and corners
                    edges: {left: true, right: true, bottom: true, top: true},

                    // keep the edges inside the parent
                    restrictEdges: {
                        outer: 'parent',
                        endOnly: true
                    },

                    // minimum size
                    restrictSize: {
                        min: {width: 0, height: 0}
                    },


                    inertia: false
                })
                .on('resizemove', function (event) {
                    var s = $(event.target);
                    var target = event.target,
                        x = (parseFloat(target.getAttribute('data-x')) || 0),
                        y = (parseFloat(target.getAttribute('data-y')) || 0),
                        xr=(parseFloat(target.getAttribute('data-x')) || 0)+s.width(),
                        yb=(parseFloat(target.getAttribute('data-y')) || 0)+s.height();

                     // update the element's style



                    // translate when resizing from top or left edges
                    x += event.deltaRect.left;
                    y += event.deltaRect.top;
                    xr += event.deltaRect.right;
                    yb += event.deltaRect.bottom;




                    var s = $(event.target);
                    var sid = s.attr('id');
                    var ns = parseInt(sid);

                    var i = ns * 2
                    every_y[i] = null;
                    every_x[i] = null;
                    every_y[i + 1] = null;
                    every_x[i + 1] = null;



                     for (ax in every_x) {
                        if ((parseInt(every_x[ax]) - 3) <= x && x <= (parseInt(every_x[ax]) + 3)) {

                            x = parseInt(every_x[ax]);
                        }else {
                        }

                    }
                    for (ay in every_y) {
                        if ((parseInt(every_y[ay]) - 3) <= y && y <= (parseInt(every_y[ay]) + 3)) {
                              y = parseInt(every_y[ay]);

                        }else {


                        }
                    }

                    for (a_x in every_x) {

                        if ((parseInt(every_x[a_x]) - 3) <= xr && xr <= (parseInt(every_x[a_x]) + 3)) {
                               xr = parseInt(every_x[a_x]);

                        }else {

                        }
                    }
                    for (a_y in every_y) {
                        if ((parseInt(every_y[a_y]) - 3) <= yb&& yb <= (parseInt(every_y[a_y]) + 3)) {
                             yb = parseInt(every_y[a_y]);
                         }else {

                        }
                    }



                    target.style.width = (xr-x) + 'px';
                    target.style.height =(yb-y) + 'px';

                    target.style.webkitTransform = target.style.transform =
                        'translate(' + x + 'px,' + y + 'px)';

                    target.setAttribute('data-x', x);
                    target.setAttribute('data-y', y);
                    target.querySelector('p.wh').textContent =(xr-x) + '\u00D7' +(yb-y) + 'px';
                    var textEl = event.target.querySelector('p.lt');

                    textEl && (textEl.textContent =
                        position(event));

                    console.info("width:"+target.style.width+" height:"+target.style.height+" x:"+x+" y:"+y);
                    ywd_calculateHeightRight(target.style.height,y);
                    ywd_calculateWidthRight(target.style.width,x);

                })
                .on('resizeend', function (event) {

                    drag_s(event);
                    myclose(event);
                    extraFunction(event);//基于移动停止的动作
                    //Util.js
                    mydraggablehandler();
                });
            //监听器 Listener
            function startListener (event) {
              //console.log(event.type, event.pageX, event.pageY);
            }
            
            function dragMoveListener(event) {

                var target = event.target,
                    // keep the dragged position in the data-x/data-y attributes
                    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
                    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;


                var s = $(event.target)
                var sid = s.attr('id');
                var ns = parseInt(sid);

                var i = ns * 2
                every_y[i] = null;
                every_x[i] = null;
                every_y[i + 1] = null;
                every_x[i + 1] = null;


                for (ax in every_x) {

                    if ((parseInt(every_x[ax]) - 3) <= x && x <= (parseInt(every_x[ax]) + 3)) {

                        x = parseInt(every_x[ax]);

                    }
                }
                for (ay in every_y) {
                    if ((parseInt(every_y[ay]) - 3) <= y && y <= (parseInt(every_y[ay]) + 3)) {
                        y = parseInt(every_y[ay]);


                    }
                }

                for (a_x in every_x) {

                    if ((parseInt(every_x[a_x]) - 3) <= (x+s.width()) && (x+s.width()) <= (parseInt(every_x[a_x]) + 3)) {

                        x = parseInt(every_x[a_x])-s.width();

                    }
                }
                for (a_y in every_y) {
                    if ((parseInt(every_y[a_y]) - 3) <= (y+s.height()) && (y+s.height()) <= (parseInt(every_y[a_y]) + 3)) {
                        y = parseInt(every_y[a_y])-s.height();


                    }
                }


                // translate the element
                target.style.webkitTransform =
                    target.style.transform =
                        'translate(' + x + 'px, ' + y + 'px)';

                // update the posiion attributes
                target.setAttribute('data-x', x);
                target.setAttribute('data-y', y);

                console.info("width:"+target.style.width+" height:"+target.style.height+" x:"+x+" y:"+y);
                ywd_calculateHeightRight(target.style.height,y);
                ywd_calculateWidthRight(target.style.width,x);
            }


            function position(e) {
                return '左' + e.target.getAttribute('data-x') + "上" + e.target.getAttribute('data-y') + 'px'
            }
            //close 关闭方法
            function myclose(event) {
                //console.info("myclose");
                $(event.target).find(".close").click(function () {
                    $('.left').find('#' + $(this).parent().attr('id')).css('display', 'block');
                    $(this).parent().remove();
                    //防止其他js破坏
                    $("#content").nextAll().remove();
                    drag_c(event)
                    // removeByValue(every_x, parseFloat(event.target.getAttribute('data-x')));
                })
                
            }
            
            

            function drag_s(event) {
                var s = $(event.target)
                var sid = s.attr('id');
                var ns = parseInt(sid);
                 var i = ns * 2
                // top  right  bottom left   //data-y  data-x+width  data-y+height  data-x

                every_y.insert(i, parseFloat(s.attr('data-y')));
                every_x.insert(i, parseFloat(s.attr('data-x')) + parseFloat(s.width()));
                every_y.insert(i + 1, parseFloat(s.attr('data-y')) + parseFloat(s.height()));
                every_x.insert(i + 1, parseFloat(s.attr('data-x')));

                //console.log(every_x, every_y)
            }

            function drag_c(event) {
                var s = $(event.target)
                var sid = s.attr('id');
                var ns = parseInt(sid);


                var i = ns * 2

                every_y.insert(i, 0);
                every_x.insert(i, 0);
                every_y.insert(i + 1, 0);
                every_x.insert(i + 1, 0);

            };
            function ywd_calculateWidthRight(w,x){
            	return;//.hide_right_height width:1000%;
            	if(isNaN(w)){w=0};
            	var total = parseFloat(w)+parseFloat(x);
            	if(parseInt(ywd_maxRightWidth)<parseInt(total)){
            		ywd_maxRightWidth=total;
            	}
            	if($(".hide_right_height").length>0){
            		
            		var draggableMmaxRightWidth=0;
            		$(".draggable").each(function(){
            			var data_x = $(this).attr("data-x");
            			var width = $(this).width();
            			if(isNaN(data_x)){data_x=0};
            			if(isNaN(width)){width=0};
            			var add_total = parseFloat(data_x)+parseFloat(width);
            			if(add_total>draggableMmaxRightWidth){
            				draggableMmaxRightWidth=add_total;
            			}
            			$(".right").width(draggableMmaxRightWidth);
            			if(draggableMmaxRightWidth<1390){
            				draggableMmaxRightWidth=1390;
            			}
            			$("body").width(draggableMmaxRightWidth+50);
            		})
            	}
            }
            function ywd_calculateHeightRight(h,y){
            	if(isNaN(h)){h=0};
            	var total = parseFloat(h)+parseFloat(y);
            	if(parseInt(ywd_maxRightHeight)<parseInt(total)){
            		ywd_maxRightHeight=total;
            	}
            	if($(".hide_right_height").length>0){
            		$(".hide_right_height").height(ywd_maxRightHeight);
            		
            		var draggableMmaxRightHeight=0;
            		$(".draggable").each(function(){
            			var data_y = $(this).attr("data-y");
            			var height = $(this).height();
            			if(isNaN(data_y)){data_y=0};
            			if(isNaN(height)){height=0};
            			var add_total = parseFloat(data_y)+parseFloat(height);
            			if(add_total>draggableMmaxRightHeight){
            				draggableMmaxRightHeight=add_total;
            			}
            			$(".hide_right_height").height(draggableMmaxRightHeight+2);
            			
            			if(typeof(window.parent.ywdList)!="undefined"){
                			$("#"+myinteract_iframe_id,parent.document).height($("body").height()+50);
            			}
            		})
            	}
            }
            window.dragMoveListener = dragMoveListener;

        };
        /*额外的动作*/
        function extraFunction(event){
        	//将分类仓的panel可以fit
        	extraFunction_panelFit(event);
        }
        //将分类仓的panel可以fit
        function extraFunction_panelFit(event){
        	var width = event.target.style.width;
        	var height = event.target.style.height;
        	$(event.target).find("[id^=easyuipanel_]").each(function(){
        		$(this).panel('resize',{
        			width: width,
        			height: height,
        			fit : 'true'
        		});
        		
        	});
        }

    })()